<template>
  <div v-loading="loading" class="retreatCloud">
    <el-form :model="cloudUp" ref="cloudUp" style="width: 100% !important;"
      label-width="120px" :rules="taskName=='业务退云'?rules:{}">
    <div class="title">基本信息</div>
    <div class="msg">

        <div class="wrap" style="margin-top: 20px;">
          <div class="item">
            <el-form-item label="上云系统:" prop="cloudUpId">
             {{form.projectname}}
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="云服务商:">
              {{form.supplierName}}
              <!-- <el-select  clearable style="width: 200px" v-model="cloudUp.cloudUpId" @change="cloudUpIdChange"
                placeholder="请先选择上云系统">
                <el-option v-for="item in xtList" :key="item.id" :label="item.projectname" :value="item.id">
                </el-option>
              </el-select> -->
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="上线时间:" prop="onlinetime">
              <el-date-picker v-if="xzfs==1" v-model="cloudUp.onlinetime" type="date" style="width: 200px" clearable
                value-format="yyyy-MM-dd" placeholder="请选择上线时间">
              </el-date-picker>
              <span v-else>{{form.onlinetime}}</span>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="上云区域:" prop="onlinetime">
              <el-select v-if="xzfs==1" v-model="cloudUp.cloudUpArea" placeholder="请选择" style="width: 200px;">
                  <el-option v-for="item in cloud_up_areaList" :key="item.dictValue" :label="item.dictLabel"
                      :value="item.dictValue">
                  </el-option>
              </el-select>
              <span v-else>{{translatecloudUpArea(form.cloudUpArea)}}</span>
            </el-form-item>
          </div>
        </div>
        <div class="wrap">
          <div class="item">
            <el-form-item label="业务部门:" prop="officeId">
              <el-cascader v-if="xzfs==1" :props="{value:'id',checkStrictly: true}" :show-all-levels="false"
                @change="deptChange" style="width: 200px" placeholder="请选择，可搜索" :options="dept" clearable filterable>
              </el-cascader>
              <span v-else>{{form.officeName}}</span>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="业主方联系人:" prop="contacts">
              <el-select v-if="xzfs==1" clearable style="width: 200px" v-model="cloudUp.contacts"
                :placeholder="cloudUp.officeId?'请选择业主方联系人':'请先选择业务部门'">
                <el-option v-for="item in users" :key="item.userName" :label="item.nickName" :value="item.userName">
                </el-option>
              </el-select>
              <span v-else>{{form.contactsNickName}}</span>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="联系电话:" prop="contactsinfo">
              <el-input v-if="xzfs==1" style="width: 200px" size="mini" placeholder="请输入联系电话"
                v-model="cloudUp.contactsinfo" clearable>
              </el-input>
              <span v-else>{{form.contactsinfo}}</span>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="邮箱:" prop="email">
              <el-input v-if="xzfs==1" style="width: 200px" size="mini" placeholder="请输入邮箱" v-model="cloudUp.email"
                clearable>
              </el-input>
              <span v-else>{{form.email}}</span>
            </el-form-item>
          </div>
        </div>
        <div class="wrap">
          <div class="item">
            <el-form-item label="承建单位:" prop="constunit">
              <el-input v-if="xzfs==1" style="width: 200px" size="mini" placeholder="请输入承建单位"
                v-model="cloudUp.constunit" clearable>
              </el-input>
              <span v-else>{{form.constunit}}</span>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="承建方联系人:" prop="constcts">
              <el-input v-if="xzfs==1" style="width: 200px" size="mini" placeholder="请输入承建方联系人"
                v-model="cloudUp.constcts" clearable>
              </el-input>
              <span v-else>{{form.constcts}}</span>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="联系电话:" prop="constctsinfo">
              <el-input v-if="xzfs==1" style="width: 200px" size="mini" placeholder="请输入联系电话"
                v-model="cloudUp.constctsinfo" clearable>
              </el-input>
              <span v-else>{{form.constctsinfo}}</span>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item label="邮箱:" prop="constemail">
              <el-input v-if="xzfs==1" style="width: 200px" size="mini" placeholder="请输入邮箱" v-model="cloudUp.constemail"
                clearable>
              </el-input>
              <span v-else>{{form.constemail}}</span>
            </el-form-item>
          </div>
        </div>


        <div class="item" style="width: calc(100% - 20px);" v-if="false">
          <el-form-item label-width="200px" label="系统建设（运维）资金来源:" prop="fundFromRadio">
            <el-radio-group v-if="xzfs==1" v-model="cloudUp.fundFromRadio">
              <el-radio label="1">区（县）</el-radio>
              <el-radio label="2">市级</el-radio>
              <el-radio label="3">
                <el-input style="width: 200px" size="mini" placeholder="请输入其他资金来源" v-model="cloudUp.fundFrom" clearable>
                </el-input>
              </el-radio>
            </el-radio-group>
            <span v-else>{{form.fundFrom}}</span>
          </el-form-item>
        </div>
        <div class="item" style="width: 100%;border-bottom: 1px solid rgba(192,196,204,0.5);">
          <el-form-item style="width: 100%;" label-width="200px" label="自行落实部门上云经费:" prop="fundBySelf">
            <el-radio-group v-if="xzfs==1" v-model="cloudUp.fundBySelf">
              <el-radio label="true">是</el-radio>
              <el-radio label="false">否</el-radio>
            </el-radio-group>
            <span v-else>{{form.fundBySelf === true ? '是' : form.fundBySelf === false ?'否':''}}</span>
          </el-form-item>
        </div>
        <div class="item" style="width: 100%;border-bottom: 1px solid rgba(192,196,204,0.5);">
          <el-form-item style="width: 100%;" label="项目简介:" prop="introduction">
            <el-input v-if="xzfs==1" type="textarea" style="width: 100%" :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入项目简介" v-model="cloudUp.introduction">
            </el-input>
            <span v-else>{{form.introduction}}</span>
          </el-form-item>
        </div>
        <div class="item" style="width: 100%;border-bottom: 1px solid rgba(192,196,204,0.5);">
          <el-form-item style="width: 100%;" label="申请理由:" prop="remarks">
            <el-input  v-if="xzfs==1"  type="textarea" style="width: 100%" :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入申请理由" v-model="cloudUp.remarks">
            </el-input>
            <span v-else>{{form.remarks}}</span>
          </el-form-item>
        </div>
      <el-dialog :visible.sync="dialogVisible">
        <div style="max-height: 90vh;overflow-y: scroll;">
          <img width="100%" :src="dialogImageUrl" alt="">
        </div>
      </el-dialog>
    </div>
    <div v-if="form.id">

      <div class="title" style="margin-top: 20px;">资源详情</div>
        <div class="wrap">
            <div class="wrap_title">
                <div>服务器</div>
            </div>
            <div style="padding: 20px 20px; width: 100%">
                <el-table
                    :data="form.hosts"
                    style="width: 100%; margin-top: 13px"
                >
                    <el-table-column label="资源类型">
                        <template slot-scope="scope">
                            {{
                                scope.row.flavorType == 1
                                    ? "云服务器"
                                    : scope.row.flavorType == 2
                                    ? "高性能服务器"
                                    : scope.row.serverCode
                                    ? "数据库"
                                    : "存储产品"
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column label="实例名称">
                        <template slot-scope="scope">
                            <span v-if="scope.row.flavorType">{{
                                scope.row.hostName
                            }}</span>
                            <span v-else-if="scope.row.serverCode">{{
                                scope.row.hostInstanceName
                            }}</span>
                            <span
                                v-else-if="!scope.row.hostInstanceNames.length"
                            ></span>
                            <div
                                v-else
                                style="margin-bottom: 6px"
                                v-for="(item, index) in scope.row
                                    .hostInstanceNames"
                                :key="index"
                            >
                                {{ item }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="资源详情">
                        <template slot-scope="scope">
                            <div
                                v-if="oldform.hosts[scope.$index].flavorType"
                                placement="top-start"
                                width="300"
                                trigger="hover"
                            >
                                <div style="margin-bottom: 6px">
                                    <label>可用域：</label
                                    >{{ oldform.hosts[scope.$index].availableDomain_label }}
                                </div>
                                <div style="margin-bottom: 6px" v-if="oldform.hosts[scope.$index].flavorType != 1">
                                    <label>资源类型：</label>
                                    {{ oldform.hosts[scope.$index].cloudFlavorCode_label }}
                                </div>
                                <div
                                    style="margin-bottom: 6px"
                                    v-if="oldform.hosts[scope.$index].flavorType == 1"
                                >
                                    <label>规格：</label
                                    >
                                    {{ oldform.hosts[scope.$index].cpuNumber }}核vCPU；{{ oldform.hosts[scope.$index].memorySize }}G内存；
                                </div>
                                <div
                                    style="margin-bottom: 6px"
                                    v-if="oldform.hosts[scope.$index].flavorType == 2"
                                >
                                    <label>规格：</label
                                    >{{ oldform.hosts[scope.$index].cloudFlavorCode_desc }}
                                </div>
                                <div
                                    style="margin-bottom: 6px"
                                    v-if="oldform.hosts[scope.$index].flavorType == 1 && oldform.hosts[scope.$index].osDisk"
                                >
                                    <label>系统盘：</label
                                    >{{
                                        oldform.hosts[scope.$index].osDisk?oldform.hosts[scope.$index].osDisk.diskServerCode_label:''
                                    }}，{{ oldform.hosts[scope.$index].osDisk?oldform.hosts[scope.$index].osDisk.dataDiskSize:'' }}GB
                                </div>
                                <div
                                    style="margin-bottom: 6px"
                                >
                                    <label>操作系统：</label
                                    >
                                    <!-- {{ oldform.hosts[scope.$index].osName }} -->
                                    {{oldform.hosts[scope.$index].osName ||osName(oldform.hosts[scope.$index].osServerCode)}}
                                </div>
                                <div style="margin-bottom: 6px" v-if="oldform.hosts[scope.$index].flavorType == 1 && oldform.hosts[scope.$index].disks">
                                    <label>
                                        数据盘(共<span style="color: #e83112">{{
                                            oldform.hosts[scope.$index].disks.length
                                        }}</span
                                        >块){{
                                            oldform.hosts[scope.$index].disks.length ? ":" : ""
                                        }}</label
                                    >
                                </div>
                                <div
                                    style="margin: 0 0 6px 16px"
                                    v-for="(item, index) in oldform.hosts[scope.$index].disks"
                                    :key="index"
                                    v-if="oldform.hosts[scope.$index].flavorType == 1 && oldform.hosts[scope.$index].disks"
                                >
                                    <span>{{ item.diskServerCode_label||item.diskServerName }}</span
                                    >，{{ item.dataDiskSize }}GB
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="wrap">
            <div class="wrap_title">
                <div>数据库</div>
            </div>
            <div style="padding: 20px 20px; width: 100%">
                <el-table
                    :data="form.databases"
                    style="width: 100%; margin-top: 13px"
                >
                    <el-table-column label="版本">
                        <template slot-scope="scope">
                            <span>{{ scope.row.serverName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="资源详情">
                        <template slot-scope="scope">
                            <div
                                placement="top-start"
                                width="300"
                                trigger="hover"
                            >
                                <div style="margin-bottom: 6px">
                                    <label>类型：</label
                                    >{{ oldform.databases[scope.$index].serverCode_label }}
                                </div>
                                <!-- <div style="margin-bottom: 6px">
                                    <label>版本：</label
                                    >{{ oldform.databases[scope.$index].databaseVersion }}
                                </div> -->
                                <div style="margin-bottom: 6px">
                                    <label>位数：</label
                                    >{{ oldform.databases[scope.$index].systemDigits }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="wrap">
            <div class="wrap_title">
                <div>存储产品</div>
            </div>
            <div style="padding: 20px 20px; width: 100%">
                <el-table
                    :data="form.storeProducts"
                    style="width: 100%; margin-top: 13px"
                >
                    <el-table-column label="磁盘类型">
                        <template slot-scope="scope">
                            <!-- {{ scope.row.diskServerCode_label }} -->
                            {{ oldform.storeProducts[scope.$index].diskServerName }}
                        </template>
                    </el-table-column>
                    <el-table-column label="磁盘用量">
                        <template slot-scope="scope">
                            <!-- <span> {{ scope.row.dataDiskSize }}GB </span> -->
                            {{ oldform.storeProducts[scope.$index].dataDiskSize }}GB
                        </template>
                    </el-table-column>
                    <el-table-column label="资源详情">
                        <template slot-scope="scope">
                            <div
                                placement="top-start"
                                width="300"
                                trigger="hover"
                            >
                                <div style="margin-bottom: 6px">
                                    <label>存储类型：</label
                                    >{{ oldform.storeProducts[scope.$index].productCode }}
                                </div>
                                <div style="margin-bottom: 6px">
                                    <label>服务类型：</label
                                    >{{ oldform.storeProducts[scope.$index].diskCode }}
                                </div>
                                <div style="margin-bottom: 6px">
                                    <label>磁盘类型：</label
                                    >{{ oldform.storeProducts[scope.$index].diskServerName }}
                                </div>
                                <div style="margin-bottom: 6px">
                                    <label>磁盘用量：</label
                                    >{{ oldform.storeProducts[scope.$index].dataDiskSize }}GB
                                </div>
                                <div style="margin-bottom: 6px">
                                    <label>服务器：</label>
                                     <div v-for="item in oldform.storeProducts[scope.$index].hostIds"> {{gethostName(item)}}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>


        <div class="wrap">
            <div class="wrap_title">
                <div>安全产品</div>
            </div>
            <div style="padding: 20px 20px; width: 100%">
              <el-table
                  :data="[].concat(form.safeProductsList)"
                  style="width: 100%; margin-top: 13px"
              >
              <el-table-column label="序号" width="60px">
                <template slot-scope="scope">
                  {{scope.$index+1}}
                </template>
              </el-table-column>
                  <el-table-column label="产品名称">
                      <template slot-scope="scope">
                          {{ scope.row.productName }}
                      </template>
                  </el-table-column>
                   <el-table-column label="数量">
                      <template slot-scope="scope">
                          {{ scope.row.ysnum }}
                      </template>
                  </el-table-column>
              </el-table>

            </div>
        </div>
        <div class="wrap" v-if="false">
            <div class="wrap_title">
                <div>其他</div>
            </div>
            <div style="padding: 10px 20px">
                <div class="wrap_item" style="margin-top: 0">
                    <div style="line-height: 28px">说明:</div>
                    <div style="width: 500px">
                        <el-input
                            type="textarea"
                            style="width: 100%"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                            placeholder="请输入说明"
                            v-model="form.remark"
                        >
                        </el-input>
                    </div>
                </div>
                <div class="wrap_item">
                    <div style="line-height: 28px">文件:</div>
                    <el-upload
                        class="upload-demo"
                        style="display: block;"
                        accept
                        list-type="picture"
                        :show-file-list="false"
                        ref="upload"
                        :file-list="form.fileList"
                        action=""
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleChange"
                        :on-change="handleChange"
                        :auto-upload="false"
                    >
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    </el-upload>
                    <el-table
                        v-if="fileListState"
                        :data="form.fileList"
                        style="margin-left:20px;width: 50vw">
                        <el-table-column
                            label="文件名称"
                            >
                            <template slot-scope="scope">
                                {{scope.row.name.substring( 0 ,scope.row.name.lastIndexOf("."))}}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="文件类型"
                            >
                            <template slot-scope="scope">
                                {{scope.row.name.substring(scope.row.name.lastIndexOf(".") + 1,scope.row.name.length)}}
                            </template>
                        </el-table-column>

                    </el-table>
                </div>
            </div>
        </div>

      <div class="title" style="margin-top: 20px;">退云详情</div>
      <div class="wrap" v-if="taskName=='业务退云'" style="display: block;padding-bottom: 10px;">
		  <el-form-item label="退云时间:" prop="exitDate">
		      <el-date-picker  v-model="cloudUp.exitDate" type="date" style="width: 200px" clearable
		        value-format="yyyy-MM-dd" placeholder="请选择">
		      </el-date-picker>
		    </el-form-item>
		  </el-form-item>
		  <el-form-item style="width: 100%;"  label="退云原因:" prop="exitReason">
		    <el-input style="width: 200px" size="mini" placeholder="请输入" v-model="cloudUp.exitReason" clearable>
		    </el-input>
		  </el-form-item>
		  
          <el-form-item style="width: 100%;" label="资源处理需求:" prop="resourceRemark">
            <el-input type="textarea" style="width:calc(100% - 10px)" :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入" v-model="cloudUp.resourceRemark">
            </el-input>
          </el-form-item>
      </div>
      <div class="wrap" v-else style="display: block;padding: 10px 0;">
        <el-form-item label="退云原因:" prop="exitReason">
         {{cloudUp.exitReason}}
        </el-form-item>
        <el-form-item label="退云时间:" prop="exitDate">
           {{cloudUp.exitDate}}
          </el-form-item>
        </el-form-item>
          <el-form-item style="width: 100%;" label="资源处理需求:" prop="resourceRemark">
            {{cloudUp.resourceRemark}}
          </el-form-item>
            <el-form-item style="width: 100%;" label="申请状态:" prop="resourceRemark">
            {{cloudUp.bpmStatus}}
          </el-form-item>
      </div>

    </div>
    </el-form>
    <action-button v-if="taskName" :taskName="taskName" :loading="btnLoading" @changeExamineShow="changeExamineShow"/>
  </div>
</template>

<script>
  import {
    getDicts
  } from "@/api/system/dict/data";
  import {
    listUser2
  } from "@/api/system/user";
  import axios from 'axios'
  import {
    DownloadFile
  } from "@/api/file/index";
  import {
    cloudExitInstId,cloudExitAudit
  } from "@/api/resources/retreatCloud";
  import {
    cloudUpList,
    AllcloudUpList,
    cloudUpDetail,
    DelectUploadFile
  } from "@/api/cloud/cloud";
  import actionButton from "@/components/actionButton/index.vue";
  export default {
    name: "addA",
    components: {actionButton},
    props: {
      dept: {
        type: Array,
        default: []
      }
    },
    data() {
      var validateFundFrom = (rule, value, callback) => {
        if (value === '3') {
          if (this.cloudUp.fundFrom) {
            callback();
          } else {
            callback(new Error('请输入其他资金来源'));
          }
        } else if (value === '') {
          callback(new Error('请选择系统建设（运维）资金来源'));
        } else {
          callback();
        }
      };
      return {
        taskName:'',
        taskId:'',
        btnLoading:false,
        loading:false,
        //新增方式
        xzfs: '2',
        //上云系统列表
        xtList: [],
        //上云系统详情
        form: {},
        //用户列表
        users: [],
        configure: {
          cloud_service_provider: ''
        },
        cloudUp: {
          cloudUpId: '', //上云系统id
          supplierCode: '',
          supplierName: '',
          projectname: '', //系统名称
          officeId: '', //业务部门Id
          officeName: '', //业务部门名称
          onlinetime: '', //上线时间


          contacts: '', //联系人id
          contactsNickName: '', //联系人名称
          contactsinfo: '', //联系电话
          email: '', //联系邮箱

          constunit: '', //承建单位
          constcts: '', //承建联系人姓名
          constctsinfo: '', //承建联系方式
          constemail: '', //承建邮箱



          fundFromRadio: '2', //系统建设（运维）资金来源选择
          fundFrom: '', //系统建设（运维）资金来源  最终值
          fundBySelf: 'false', //自行落实部门上云经费

          introduction: '', //项目简介
          constunit: '', //承建单位
          remarks: '', //申请理由
          files: [], //附件列表
        },
        // isIndeterminate: true,
        checkAll: false,
        rules: {
          cloudUpId: [{
            required: true,
            message: '请选择业务系统',
            trigger: 'change'
          }, ],
          exitDate: [{
            required: true,
            message: '请选择退云时间',
            trigger: 'change'
          }, ],
          exitReason: [{
            required: true,
            message: '请输入退云原因',
            trigger: 'change'
          }, ],
          resourceRemark: [{
            required: true,
            message: '请输入资源处理需求',
            trigger: 'change'
          }, ],
        },
        input2: 0,
        dialogImageUrl: '',
        dialogVisible: false,
        base_url: process.env.VUE_APP_BASE_API,
        cloud_up_areaList : []
      };
    },
    created() {
      //服务商
      getDicts("cloud_service_provider").then((response) => {
        this.configure.cloud_service_provider = response.data;
      });
      getDicts("cloud_up_area").then((response) => {
          this.cloud_up_areaList = response.data;
      });
      AllcloudUpList({
        isXc:'false'
      }).then(response => {
        this.xtList = response.rows;
      }).then(() => {});

      this.getData()
       var list = JSON.parse(sessionStorage.getItem('retreatCloudsExamine'));
       this.taskName = list.taskName;
       this.taskId = list.taskId;
    },
    methods: {
      changeExamineShow(num,leble){
        if(this.taskName=='业务退云'){
          this.submit()
          return
        }
          this.$prompt('请输入审批意见', num == 1 ? '通过': '不通过', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          inputValue:num == 1 ? '通过': '不通过',
          }).then((resp) => {
              this.btnLoading = true
              var obj = {
                  taskId: this.taskId,
                  actionName: num == 1 ? '通过': '不通过',
                  action: num == 1 ? 'COMPLETE': 'BACK',
                  comment:resp.value,
              }
              cloudExitAudit(obj).then(res=>{
                  if(res.code == 200){
                      this.$message({
                          type: 'success',
                          message: res.msg
                      });
                      this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
                      this.$destroy(this.$options.name)
                      this.$router.push('/todoItem/todo')
                      this.btnLoading = false
                  }
              }).catch(err=>{
                  this.btnLoading = false
              })
          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消操作'
              });
          });
      },
      submit(){
        this.$refs.cloudUp.validate((valid) => {
          if (valid) {
            this.$confirm("确定要提交审核?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
              .then(() => {
                this.btnLoading=true
                var obj = {
                    taskId: this.taskId,
                    actionName: '通过',
                    action:'COMPLETE',
                    formObject:{
                      "id": this.cloudUp.id,
                      "cloudUpId": this.cloudUp.cloudUpId,
                      "exitDate": this.cloudUp.exitDate,
                      "exitReason": this.cloudUp.exitReason,
                      "resourceRemark": this.cloudUp.resourceRemark
                    }
                }
                cloudExitAudit(obj).then(res=>{
                    if(res.code == 200){
                        this.$message({
                            type: 'success',
                            message: res.msg
                        });
                        this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
                        this.$destroy(this.$options.name)
                        this.$router.push('/todoItem/todo')
                        this.btnLoading = false
                    }
                }).catch(err=>{
                    this.btnLoading = false
                })
              })

          } else {
            return false;
          }
        });

      },
      getData(){
        cloudExitInstId({instId:this.$route.params.id}).then(res=>{
          if(res.code==200){
            this.form=res.data.cloudUp
            this.cloudUp=res.data

            this.form.safeProductsList=[]
            for(let key in this.form.safeProducts){
              this.form.safeProductsList.push({productName:key,ysnum:data.safeProducts[key].length})
            }

          }
        })
      },

      cancel(){
        this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
        this.$destroy('retreatCloudAdd')
        this.$router.push('/resources/retreatCloud')
      },

      translatecloudUpArea(data){
        var Name = ''
        this.cloud_up_areaList.forEach(item=>{
            if(item.dictValue == data){
                Name = item.dictLabel
            }
        })
        return Name
      },
      previewFile(item) {
        this.dialogImageUrl = this.base_url + item.filePath;
        this.dialogVisible = true;
      },
      // 文件删除
      DeleteFile(id) {
        this.$confirm("是否删除该文件?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            DelectUploadFile(id).then(res => {
              if (res.code == 200) {
                this.form.files = this.form.files.filter(item => {
                  if (item.id == id) {

                  } else {
                    return item
                  }
                })
                this.$message({
                  message: '删除成功',
                  type: 'success'
                });
              }

            })
          })
      },
      download(item){
        let downloadFile = this.base_url + '/system/downloadFile?fileName=' + item.fileName + '&filePath=' + item.filePath
        window.location.href = downloadFile
        return
      },
      //文件预览
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //文件列表变化
      handleChange(res, fileList) {
        this.cloudUp.files = fileList
      },
      //下一步
      next() {
        this.$refs.cloudUp.validate((valid) => {
          if (valid) {
            // let cloudUp=JSON.parse(JSON.stringify(this.cloudUp))
            let cloudUp = this.cloudUp
            if (this.xzfs == 1) {
              cloudUp.cloudUpId = ''
              this.users.some(item => {
                if (item.userName == cloudUp.contacts) {
                  cloudUp.contactsNickName = item.nickName
                  return true
                }
              })
            } else {
              let cloudUpId = cloudUp.cloudUpId
              cloudUp = this.form
              cloudUp.cloudUpId = cloudUpId
            }
            this.$emit('next', cloudUp)
          } else {
            return false;
          }
        });
      },
      //新增方式变化
      // xzfsChange(e) {
      //   this.$refs.cloudUp.clearValidate()
      //   if (e == 2 && !this.xtList.length) {
      //     AllcloudUpList().then(response => {
      //       this.xtList = response.rows;
      //     }).then(() => {});
      //   }
      // },
      //上云系统变化
      cloudUpIdChange(e) {
        if (e) {
          this.loading = true
          cloudUpDetail(e).then(response => {
            this.form = response.data
            this.loading = false
          })
        }else{
          this.form={}
        }
      },
      //业务部门变化
      deptChange(e) {
        this.users = []
        this.cloudUp.contacts = ''
        this.cloudUp.officeId = ''
        if (e.length) {
          this.cloudUp.officeId = e[e.length - 1]
          this.getName(this.dept, this.cloudUp.officeId)
          listUser2({
            deptId: this.cloudUp.officeId,
            pageNum: 1,
            pageSize: 10000000
          }).then(response => {
            this.users = response.rows
          })
        }
      },
      getName(data, id) {
        data.forEach(item => {
          if (item.id == id) {
            this.cloudUp.officeName = item.label
          } else if (item.children && item.children.length) {
            this.getName(item.children, id)
          }
        })
      },
      // handleCheckAllChange(val) {
      //   this.checked = val ? this.options : [];
      //   this.isIndeterminate = false;
      // },
      // handleCheckedChange(value) {
      //   let checkedCount = value.length;
      //   this.checkAll = checkedCount === this.options.length;
      //   this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
      // }

    }
  };
</script>
<style scoped lang="less">
  .retreatCloud {
    padding: 20px;
    margin-bottom: 30px;
    font-size: 12px;

    .title {
      text-align: left;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: bold;
      padding-left: 4px;
      border-left: 4px solid #38b3aa;
    }

    .el-form-item {
      margin: 10px 0;
    }

    .msg {
      padding: 0 20px 20px 20px;
      background: #faf9ff;
      border-radius: 10px;
      overflow-x: hidden;
      min-width:1380px;
      .wrap {
        width: 100%;
        display: flex;
        border-bottom: 1px solid rgba(192,196,204,0.5);
      }

      .item {
        width: 25%;
        display: flex;
      }
    }
    .wrap {
        display: flex;
        background: #faf9ff;
        margin-top: 20px;
        border-radius: 10px;

        .wrap_title {
            padding: 0 10px;
            background: #f4f4f4;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;

            div {
                height: 100%;
                width: 14px;
                font-weight: bold;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }

        .wrap_item {
            display: flex;
            margin-top: 20px;

            div:first-child {
                width: 90px;
                font-weight: bold;
            }

            i {
                line-height: 28px;
                margin-right: 10px;
                font-size: 20px;
                color: #e83112;
            }
        }
    }
  }
</style>
